<template>
	<view class="container">
		<view class="header">
			<text class="title">课程记录</text>
			<text class="subtitle">查看看过的直播记录与录播回放</text>
		</view>

		<!-- 筛选与搜索 -->
		<view class="filters">
			<input class="search-input" v-model="keyword" placeholder="搜索课程/老师" @confirm="fetchRecords" />
			<uni-button size="mini" type="primary" @tap="fetchRecords">搜索</uni-button>
		</view>

		<!-- 课程记录列表 -->
		<scroll-view scroll-y class="list">
			<view v-for="(item, index) in records" :key="item.recordId || index" class="record-card" @tap="openRecord(item)">
				<view class="cover" :style="{ backgroundImage: 'url(' + (item.cover || defaultCover) + ')' }"></view>
				<view class="info">
					<text class="name">{{ item.title }}</text>
					<text class="meta">老师：{{ item.teacherName }} · 最近观看：{{ item.lastWatchedAt || '-' }}</text>
					<view class="tags">
						<text v-if="item.isLive" class="tag live">直播</text>
						<text v-if="item.hasReplay" class="tag replay">有录播</text>
					</view>
				</view>
				<view class="actions">
					<uni-button size="mini" @tap.stop="resumePlay(item)">继续观看</uni-button>
					<uni-button v-if="item.hasReplay" size="mini" type="primary" @tap.stop="playReplay(item)">看录播</uni-button>
				</view>
			</view>
			<view v-if="records.length === 0" class="empty">暂无课程记录</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';

	const keyword = ref('');
	const records = ref<any[]>([]);
	const defaultCover = 'https://ai-public.mastergo.com/ai/img_res/5e74b8b2f90b2b7a28f8c6f1d6f1c8a0.jpg';

	// 前端人员：获取课程观看记录
	// BACKEND REQUIRED
	// GET /api/records?keyword=字符串&page=页码&pageSize=条数
	// Response 200
	// {
	//   "success": true,
	//   "data": [
	//     {
	//       "recordId": "REC_001",
	//       "courseId": "COURSE_001",
	//       "title": "高等数学直播第3讲",
	//       "teacherName": "张老师",
	//       "cover": "https://.../cover.jpg",
	//       "isLive": false,
	//       "hasReplay": true,
	//       "lastWatchedAt": "2025-08-26 20:12:00",
	//       "lastProgress": 1250
	//     }
	//   ],
	//   "page": 1,
	//   "pageSize": 20,
	//   "total": 36
	// }
	const fetchRecords = () => {
		uni.request({
			url: '/api/records',
			method: 'GET',
			data: { keyword: keyword.value, page: 1, pageSize: 20 },
			success: (res: any) => {
				if (res.data && res.data.success) {
					records.value = res.data.data || [];
				} else {
					records.value = [];
				}
			},
			fail: () => { records.value = []; }
		});
	};

	// 前端人员：继续观看（恢复进度）
	// BACKEND REQUIRED
	// POST /api/records/resume
	// body: { courseId: string, recordId?: string }
	// 返回播放地址、起始进度
	// { success: true, data: { playUrl: '...', startPosition: 1250 } }
	const resumePlay = (item: any) => {
		uni.request({
			url: '/api/records/resume',
			method: 'POST',
			data: { courseId: item.courseId, recordId: item.recordId },
			success: (res: any) => {
				if (res.data?.success) {
					playUrl(res.data.data.playUrl, res.data.data.startPosition);
				} else {
					uni.showToast({ title: '无法恢复播放', icon: 'none' });
				}
			}
		});
	};

	// 前端人员：播放录播
	// BACKEND REQUIRED
	// POST /api/records/replay
	// body: { courseId: string }
	// 返回录播播放地址
	// { success: true, data: { playUrl: '...' } }
	const playReplay = (item: any) => {
		uni.request({
			url: '/api/records/replay',
			method: 'POST',
			data: { courseId: item.courseId },
			success: (res: any) => {
				if (res.data?.success) {
					playUrl(res.data.data.playUrl, 0);
				} else {
					uni.showToast({ title: '无法获取录播', icon: 'none' });
				}
			}
		});
	};

	const playUrl = (url: string, positionSeconds: number) => {
		// 这里留给播放器页面处理
		uni.navigateTo({ url: `/pages/player/player?url=${encodeURIComponent(url)}&pos=${positionSeconds}` });
	};

	onMounted(fetchRecords);
</script>

<style>
	.container { padding: 30rpx; }
	.header { margin-bottom: 20rpx; }
	.title { font-size: 20px; font-weight: 700; color: #333; }
	.subtitle { font-size: 14px; color: #666; display: block; margin-top: 8rpx; }
	.filters { display: flex; gap: 12rpx; margin: 16rpx 0 20rpx; }
	.search-input { flex: 1; height: 72rpx; border: 1px solid #e0e0e0; border-radius: 10rpx; padding: 0 20rpx; background: #fafafa; }
	.list { max-height: calc(100vh - 260rpx); }
	.record-card { display: flex; gap: 14rpx; background: #fff; border-radius: 14rpx; padding: 16rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.05); }
	.cover { width: 180rpx; height: 120rpx; border-radius: 10rpx; background-size: cover; background-position: center; }
	.info { flex: 1; display: flex; flex-direction: column; gap: 8rpx; }
	.name { font-size: 16px; font-weight: 600; color: #222; }
	.meta { font-size: 12px; color: #888; }
	.tags { display: flex; gap: 8rpx; }
	.tag { font-size: 12px; padding: 4rpx 8rpx; border-radius: 6rpx; }
	.live { background: #ffecec; color: #ff4d4f; }
	.replay { background: #e8f7e8; color: #52c41a; }
	.actions { display: flex; gap: 8rpx; align-items: center; }
	.empty { text-align: center; color: #999; margin-top: 60rpx; }
</style>



